<template>
  <div class="mixin-components-container">
    <el-row>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>退检窗口</span>
        </div>

        <div class="filter-container">
          <!-- 报班卡号 -->
          <el-form
            :inline="true"
            ref="form"
            :model="listQuery"
            label-width="100px"
          >
            <el-form-item label="车票编号：">
              <el-input
                placeholder="请输入车票号"
                v-model="listQuery.cpbh"
                class="cardNumber"
                id="cpbh-input"
                style="width: 200px"
                clearable
                @keydown.enter.native="rejectionEneter(listQuery.cpbh)"
              />
            </el-form-item>
            <!-- 按钮 -->
            <el-button type="primary" @click="rejection(listQuery.cpbh)">
              确认退检
            </el-button>
          </el-form>

          <!-- 报班卡号  end -->
        </div>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import { getTicketList } from "@/api/jianpiao";

export default {
  name: "Tuijian",
  data() {
    return {
      listQuery: {
        cpbh: "", //车票编号
      },
      list: {},
      truecpbh: "111111",
      flasecpbh: "222222",
      nocpbh: "333333",
      message: "",
      isShow: true,
    };
  },
  methods: {
    // 清空数据
    clearInput() {
      document.getElementById("cpbh-input").value = "";
    },

    // 获取车票表中的数据
    getTicketList() {
      const tempData = Object.assign({}, this.listQuery);
      getTicketList(tempData)
        .then((res) => {
          console.log("获取到的数据", res.data);
          this.list = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 按下回车退检
    rejectionEneter(cpbh) {
      // this.getTicketList();
      if (cpbh == this.flasecpbh) {
        this.$message({
          message: "警车票编号错误，请检查后输入",
          type: "warning",
        });
      } else if (cpbh == this.nocpbh) {
        this.$message.error("该车票未检票");
      } else {
        this.$message({
          type: "success",
          message: "退检成功!",
        });
      }
      this.clearInput();
    },
    rejection(cpbh) {
      if (cpbh == this.flasecpbh) {
        this.$message({
          message: "警车票编号错误，请检查后输入",
          type: "warning",
        });
        this.clearInput();
      } else if (cpbh == this.nocpbh) {
        this.$message.error("该车票未检票");
        this.clearInput();
      } else {
        this.$confirm("确认退检此票?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$message({
              type: "success",
              message: "退检成功!",
            });
            this.clearInput();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消退检",
            });
          }, 1000);
      }
    },
  },
  mounted() {
    // this.getTicketList();
  },
};
</script>

<style scoped>
.dialog-button {
  margin-top: 50px;
}
.cardNumber {
  margin-right: 50px;
}
.button-style {
  margin-bottom: 15px;
}
.button {
  margin-top: 30px;
  margin-bottom: 10px;
}
.right-input {
  float: right;
}
button {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
span {
  font-size: 14px;
  color: #606266;
}
.mixin-components-container {
  background-color: #f0f2f5;
  padding: 30px;
  min-height: calc(100vh - 84px);
}
.component-item {
  min-height: 100px;
}
</style>

